<template>
  <div>
    <a-popover
      v-model='visible'
      trigger='click'
      placement='bottomRight'
      overlayClassName='header-notice-wrapper'
      :getPopupContainer='() => $refs.noticeRef.parentElement'
      :autoAdjustOverflow='true'
      :arrowPointAtCenter='true'
      :overlayStyle="{ width: '400px', top: '50px' }"
    >
      <template slot='content'>
        <a-spin :spinning='loading'>
          <a-tabs>
            <a-tab-pane tab='系统公告' key='1'>
              <a-list>
                <a-list-item v-for='(item,index) in systemMsgList' :key='index'>
                  <a-list-item-meta :title='item.msgTitle' :description='item.createTime'
                                    @click='showSysMessage(item)'>
                    <a-avatar style='background-color: white' slot='avatar'
                              src='https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png' />

                  </a-list-item-meta>
                  <div>
                    <a-tag @click='showSysMessage(item)'>查看</a-tag>
                  </div>
                </a-list-item>
              </a-list>
            </a-tab-pane>
            <a-tab-pane tab='个人消息' key='2'>
              <a-list>
                <a-list-item v-for='(item,index) in personalMsgList' :key='index'>
                  <a-list-item-meta :title='item.msgContent' :description='item.createTime' @click='lookMessage(item)'>
                    <a-avatar style='background-color: white' slot='avatar'
                              src='https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png' />
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
            <a-tab-pane tab='维护通知' key='3'>
              <a-list>
                <a-list-item v-for='(item,index) in systemMaintenanceList' :key='index'>
                  <a-list-item-meta :title='item.msgTitle' :description='item.createTime' @click='lookMessage(item)'>
                    <a-avatar style='background-color: white' slot='avatar'
                              src='https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png' />
                    <a hefr=''>查看</a>
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-spin>
      </template>
      <span @click='fetchNotice' class='header-notice' ref='noticeRef'>
      <a-badge :count='noReadNum'>
        <a-icon style='font-size: 16px; padding: 4px' type='bell' />
      </a-badge>
    </span>
    </a-popover>
    <sys-msg-modal ref='sysMsgModal'></sys-msg-modal>
  </div>
</template>
<script>
import store from "../../store"
import api from "../../views/module/message/receive/js/api"
import sysMsgModal from "../SysMsgModal/SysMsgModal"
import { mapActions } from "vuex"
import { webSocketMixins } from "@/core/mixins/webSocket"
/*import SockJS from 'sockjs-client'
import Stomp from 'stompjs'*/

export default {
  name: "HeaderNotice",
  components: { sysMsgModal },
  mixins: [webSocketMixins],
  data() {
    return {
      refs: this.$refs,
      loading: false,
      visible: false,
      lockReconnect: false,
      noReadNum: 0,
      systemMsgList: [],
      personalMsgList: [],
      systemMaintenanceList: []
    }
  },
  methods: {
    ...mapActions(["Logout"]),
    fetchNotice() {

      this.visible = !this.visible
      //this.getNoReadMessageInfo();
    },
    lookMessage(item) {
      //this.$router.push({ path: 'account/receive/message', params: { msgUserId: item.msgUserId } })
    },
    showSysMessage(item) {
      this.$refs.sysMsgModal.showModal(item.msgId)
      this.changeReadState(item)
    },
    changeReadState(item) {
      this.http.post(this, {
        url: api.receive.setReadState,
        data: { msgUserId: item.msgUserId, readState: 1 },
        success: function(me, data) {
          me.getNoReadMessageInfo()
        }
      })
    },
    getNoReadMessageInfo() {
      this.http.get(this, {
        url: api.receive.getNoReadMessageInfo,
        data: {},
        success: function(me, data) {
          console.log(data)
          me.noReadNum = data.noReadNum
          me.personalMsgList = data.personalMsgList
          me.systemMsgList = data.systemMsgList
          me.systemMaintenanceList = data.systemMaintenanceList
        }
      })
    },
    countDown() {
      let secondsToGo = 30
      const modal = this.$success({
        title: "系统维护通知",
        content: `系统将于${secondsToGo} 秒后关闭`
      })
      const interval = setInterval(() => {
        secondsToGo -= 1
        modal.update({
          content: `系统将于 ${secondsToGo} 秒后关闭.`
        })
      }, 1000)
      setTimeout(() => {
        clearInterval(interval)
        return this.Logout({}).then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 16)
        }).catch(err => {
          this.$message.error({
            title: "错误",
            description: err.message
          })
        })
        modal.destroy()
      }, secondsToGo * 1000)
    },
    onNoticeMessage(messageInfo){
      console.log("收到消息",messageInfo)
    },
    initWebsocket2() {
      let that = this
      let socketUrl = this.api.websocket + "/" + store.getters.userId + "/1"
      socketUrl = socketUrl.replace("https", "ws").replace("http", "ws")
      console.log(socketUrl)
      let websocket = new WebSocket(socketUrl)
      //打开事件
      websocket.onopen = function(event) {
        console.log("建立连接")
        websocket.send("ping")
      }
      //关闭事件
      websocket.onclose = function(event) {
        console.log("连接关闭")
      }
      //获得消息事件
      websocket.onmessage = function(event) {
        console.log("收到消息：" + event.data)
        let messageInfo = JSON.parse(event.data)
        let typeCode = messageInfo.typeCode
        let msgId = messageInfo.msgId
        if (typeCode == "SystemMaintenance") {
          that.getNoReadMessageInfo()
          that.countDown()
        } else {
          that.getNoReadMessageInfo()
          that.$notification.success({
            message: "消息通知",
            description: messageInfo.msgContent
          })
        }
      }
      //发生了错误事件
      websocket.onerror = function(event) {
        console.log("websocket 通信发生错误")
      }
    }
  },
  mounted() {

  },
  created() {
    this.getNoReadMessageInfo()
    //this.initWebSocket(this.onNoticeMessage,1);
  }
}
</script>

<style lang='css'>
.header-notice-wrapper {
  top: 50px !important;
}
</style>
<style lang='less' scoped>
.header-notice {
  display: inline-block;
  transition: all 0.3s;

  span {
    vertical-align: initial;
  }
}

.content {
  display: inline;
}
</style>
